'use client';

import { Uppy } from '@uppy/core';
import AWSS3 from '@uppy/aws-s3';
import { use, useState } from 'react';
import { Button } from '@/components/ui/Button';
import { trpcPureClient } from '@/utils/api';
import { UploadButton } from '@/components/feature/UploadButton';
import { Dropzone } from '@/components/feature/Dropzon';
import { UploadPreview } from '@/components/feature/UploadPreview';
import { FileList } from '@/components/feature/FileList';
import type { FilesOrderByColumn } from '@/server/routes/file';
import { MoveDown, MoveUp, Settings } from 'lucide-react';
import { Switch } from '@/components/ui/Switch';
import Link from 'next/link';

export default function AppPage({
  params,
}: {
  params: Promise<{
    id: string;
  }>;
}) {
  const { id: appId } = use(params);

  const [uppy] = useState(() => {
    const uppy = new Uppy();
    uppy.use(AWSS3, {
      shouldUseMultipart: false,
      getUploadParameters(file) {
        return trpcPureClient.file.createPresignedUrl.mutate({
          filename: file.data instanceof File ? file.data.name : 'test',
          contentType: file.data.type ?? '',
          size: file.size ?? 0,
          appId,
        });
      },
    });

    return uppy;
  });

  const [orderBy, setOrderBy] = useState<FilesOrderByColumn>({
    order: 'desc',
    field: 'createdAt',
  });
  const [withDeleted, setWithDeleted] = useState(false);

  return (
    <div className="mx-auto h-full">
      <div className="flex justify-between items-center h-[60px] px-[64px]">
        <div className="flex gap-2">
          <Button
            onClick={() => {
              setOrderBy((current) => ({
                field: current?.field ?? 'createdAt',
                order: current?.order === 'asc' ? 'desc' : 'asc',
              }));
            }}
          >
            Created At {orderBy?.order === 'asc' ? <MoveDown /> : <MoveUp />}
          </Button>
          <div className="flex justify-between items-center gap-1">
            <Switch checked={withDeleted} onCheckedChange={setWithDeleted} />
            Show Deleted
          </div>
        </div>
        <div className="flex justify-center gap-2">
          <UploadButton uppy={uppy}></UploadButton>
          <Button asChild>
            <Link href={`new`} passHref>
              New App
            </Link>
          </Button>
          <Button asChild>
            <Link href={`/dashboard/apps/${appId}/setting/storage`} passHref>
              <Settings />
            </Link>
          </Button>
        </div>
      </div>
      <Dropzone uppy={uppy} className="relative h-[calc(100%-60px)]">
        {(dragging) => (
          <>
            {dragging && (
              <div className="absolute inset-0 bg-secondary/50 z-50 flex justify-center items-center text-3xl">
                Drop File Here To Upload
              </div>
            )}
            <FileList
              uppy={uppy}
              orderBy={orderBy}
              withDeleted={withDeleted}
              appId={appId}
            />
          </>
        )}
      </Dropzone>
      <UploadPreview uppy={uppy} />
    </div>
  );
}
